<template>
  <section style="background-color: #f0f0f0;">
    <!--    <iframe src="http://jtqgjs.gandongyun.cn/"></iframe>-->
    <div class="tableBox">
      <TableList :list="list" :column="column">
        <div slot="column2" class="noBlueBg">
          <el-table-column
            prop="manufacturer"
            align="center"
            width="200"
            label="推送状态">
            <template slot-scope="scope">
              成功推送
            </template>
          </el-table-column>
          <el-table-column
            prop="groupName"
            align="center"
            width="150"
            label="所属中心">
          </el-table-column>

          <el-table-column
            align="center"
            width="150"
            label="路段">
            <template slot-scope="scope">
              {{scope.row['bscCamera'] && scope.row.bscCamera.road}}
            </template>
          </el-table-column>

          <el-table-column
            prop="name"
            align="left"
            label="设备名称">
            <template slot-scope="scope">
              {{scope.row['bscCamera'] && scope.row.bscCamera.name}}
            </template>
          </el-table-column>

          <el-table-column
            prop="groupValue"
            align="center"
            label="分组">
            <template slot-scope="scope">
              {{scope.row['bscCamera'] && scope.row['bscCamera']['groupValue']}}/{{ scope.row['bscCamera'] &&
              getTypeName(scope.row['bscCamera']['groupType'])}}
            </template>
          </el-table-column>

          <el-table-column
            prop="manufacturer"
            width="200"
            align="center"
            label="事件类型">
            <template slot-scope="scope">
              {{getEvtName(dict['event'][scope.row.eventTypeTwoCode])}}
            </template>
          </el-table-column>



          <el-table-column
            prop="removeTime"
            align="center"
            width="200"
            label="检测/消除时间">
            <template slot-scope="scope">
              {{scope.row['detectedTime']}}<br>
              {{scope.row['removeTime']}}
            </template>
          </el-table-column>
          <el-table-column
            prop="manufacturer"
            align="center"
            width="200"
            label="事件状态">
            <template slot-scope="scope">
              {{dict['status'][scope.row.state]}}
            </template>
          </el-table-column>

        </div>
        <div slot="option" class="noBlueBg">
          <el-form :inline="true" :model="options" class="demo-form-inline" ref="optionForm">
            <el-form-item label="所属中心" prop="group">
              <el-select class="w120" size="mini" v-model="options.group" clearable placeholder="所属中心">
                <el-option v-for="(v,k) in dict['center']" :label="v" :value="k" :key="k"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="路段" prop="road">
              <el-input class="w120" size="mini" v-model="options.road" clearable placeholder="请输入路段"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="name">
              <el-input class="w120" size="mini" v-model="options.name" clearable placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="事件类型" prop="eventTypeTwoCode">
              <el-select class="w120" size="mini" v-model="options.eventTypeTwoCode" clearable placeholder="选择事件类型">
                <el-option v-for="(label,k) in evtTypes" :label="label" :value="k" :key="k"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="state">
              <el-select class="w120" size="mini" v-model="options.state" clearable placeholder="事件状态">
                <el-option :label="name" :value="code" v-for="(name,code) in evtStatus"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="检测时间" prop="detectedTime">
              <el-date-picker
                v-model="options.detectedTime"
                size="mini"
                class="w120"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="消除时间" prop="removeTime">
              <el-date-picker
                v-model="options.removeTime"
                class="w120"
                size="mini"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="loadVideoList(1)">查询</el-button>
              <el-button size="mini" @click="resetOption('optionForm')">重置</el-button>
              <el-button size="mini" type="warning" @click="exportTab">导出表格</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="page noBlueBg" slot="bottom">
          <el-pagination
            @size-change="changeSize"
            @current-change="changePage"
            :page-sizes="[20, 50, 100, 200]"
            :current-page="page"
            :page-size="limit"
            layout="sizes,total,prev, pager, next, jumper"
            :total="totals">
          </el-pagination>
        </div>
      </TableList>
    </div>
  </section>
</template>

<script>
  import TableList from 'comp/common/TableList3';

  export default {
    name: "Cloud", components: {
      TableList
    },
    data() {
      return {
        dict: this.$kkui.cache.get('dict'),
        evtStatus: this.$kkui.cache.get('dict')['status'],
        options: {
          name: '',
          group: '',
          road:'',
          eventTypeTwoCode: '',

          state: '',
          detectedTime:'',
          removeTime:''

        },
        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,
        list:[],

        groups: this.$kkui.cache.get('dict')['cameraGroup'],
      }
    },
    computed: {
      evtTypes() {
        let data = this.$kkui.cache.get('dict')['event'];
        for (let key in data) {
          data[key] = data[key].indexOf('-') > -1 ? data[key].split('-')[1] : data[key];
        }
        return {'-1': '无事件', ...data};
      }
    },
    mounted() {
      setTimeout(() => {
        this.$kkui.loading_deepBlue.hide();
        this.loadVideoList();
      }, 1000)
    },
    methods: {
      //加载列表
      loadVideoList(firstPageFlag) {
        if (firstPageFlag) this.page = 1;

        this.$server('monitor.list3', {
          limit: this.limit,
          page: this.page,
          ...this.options,
        }).then(data => {
          this.list = data['records'];
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },
      resetOption(formName) {
        this.$refs[formName].resetFields();
        this.loadVideoList(1);
      },
      exportTab() {
        const index = this.$kkui.loading.show();
        this.$server('camera.faultTable2', {
          ...this.options
        }).then(data => {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '云控平台推送事件信息表.xls');
          document.body.appendChild(link);
          link.click()
        })
      },

      getTypeName(code) {
        return this.groups[code]
      },
      getEvtName(name) {
        return name = name.indexOf('-') > -1 ? name.split('-')[1] : name;
      },
      //切换分页
      changePage(page) {
        this.page = page;
        this.loadVideoList();
      },

      changeSize(limit) {
        this.limit = limit;
        this.loadVideoList();
      },
    }
  }
</script>

<style scoped lang="scss">
  @import "~css/monitor.scss";

  .tableBox {
    padding: 0 20px;
  }

  /deep/ .option {
    padding-top: 10px;
    border-bottom: 1px solid #EBEEF5;
  }

  iframe {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    border: none;
  }

  .w120 {
    width: 120px !important;
  }
  /deep/ .el-input--prefix .el-input__inner{
    padding-left: 30px!important;
  }

</style>
